<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣诞树</title>
    <link rel="stylesheet" href="./index.css">
	<style>
		html,body{
		    width: 100%;  
		    height: 100%;
		}
		*{
		    margin: 0;
		    padding: 0;
		}
		body{
		    position: relative;
		    overflow: hidden;
		    background-color: #020024;
		    background: linear-gradient(#021317,#293841,#80afa3,#ded8c9);
		}
		.moon{
		    width: 50px;
		    height: 50px;
		    border-radius: 50%;
		    position: absolute;
		    top: 5%;
		    left: 20%;
		    transform: rotate(186deg);
		    box-shadow: 10px -10px rgba(255, 255, 255, 0.9);
		}
		p{
		    color: palevioletred;
		    text-align: center;
		    margin-top: 50px;
		    font-size:30px;
		    animation:wsy 2s ease infinite alternate ;
		}
		@keyframes wsy{
		    0%,100%{
		        transform: scale(1);
		    }
		    50%{
		        transform: scale(0.9);
		    }
		}
		
		.word{
		    font-size: 22px;
		    text-align: center;
		    color: gold;
		    padding-top:50px ;
		    letter-spacing: 5px;
		    text-shadow: 2px 4px 9px rgba(255, 255,255, 0.7);
		}
		.tree{
		    width: 200px;
		    height: 300px;
		    margin: 80px auto 0 auto ;
		    position: relative;
		}
		.star{
		    width: 50px;
		    height: 50px;
		    position: absolute;
		    background: #fff;
		    border-radius: 50%;
		    top: -25px;
		    z-index: 1000;
		    left: 50%;
		    transform: translateX(-50%);
		    animation:starLight 1.5s ease infinite alternate ;
		}
		.star_in{
		    position:absolute ;
		    left: 50%;
		    top: 50%;
		    border-right: 100px solid transparent;
		    border-bottom: 70px solid yellow;
		    border-left: 100px solid transparent;
		    transform:translateX(-50% ) translateY(-50%) rotate(35deg) scale(0.14);
		
		}
		.star_in::before{
		    border-bottom: 80px solid yellow;
		    border-left: 30px solid transparent;
		    border-right: 30px solid transparent;
		    position: absolute;
		    top: -45px;
		    left: -65px;
		    content: '';
		    transform: rotate(-35deg);
		}
		.star_in::after{
		    border-bottom: 70px solid yellow;
		    border-left: 100px solid transparent;
		    border-right: 100px solid transparent;
		    position: absolute;
		    top: 3px;
		    left: -105px;
		    content: '';
		    transform: rotate(-70deg);
		}
		@keyframes starLight {
		    0%{
		        background: radial-gradient(ellipse at center,yellow 0%,
		        rgba(255,240,158,0.5) 42%,
		        rgba(255,242,173,0.2) 58%,
		        rgba(255,255,255,0.1) 100%
		        );
		    }
		    25%{
		        background: radial-gradient(ellipse at center,yellow 0%,
		        rgba(255,240,158,0.5) 40%,
		        rgba(255,242,173,0.2) 60%,
		        rgba(255,255,255,0.1) 100%
		        );
		    }
		    50%{
		        background: radial-gradient(ellipse at center,yellow 0%,
		        rgba(255,240,158,0.5) 38%,
		        rgba(255,242,173,0.2) 62%,
		        rgba(255,255,255,0.1) 100%
		        );
		    }
		    75%{
		        background: radial-gradient(ellipse at center,yellow 0%,
		        rgba(255,240,158,0.5) 36%,
		        rgba(255,242,173,0.2) 64%,
		        rgba(255,255,255,0.1) 100%
		        );
		    }
		    100%{
		        background: radial-gradient(ellipse at center,yellow 0%,
		        rgba(255,240,158,0.5) 34%,
		        rgba(255,242,173,0.2) 66%,
		        rgba(255,255,255,0.1) 100%
		        );
		    }
		}
		
		.leaf{
		    position: absolute;
		    left: 50%;
		    top: 3%;
		    margin-left: -30px;
		    background-color: rgba(14,100,14);
		    width: 60px;
		    height: 60px;
		    border-radius: 0 10px 35px 10px;
		    transform: rotate(45deg);
		    box-shadow: 2px 7px 2px rgba(43,43,43,0.2);
		}
		.edge{
		    position: absolute;
		    left: 0;
		    bottom: 0;
		    background-color: rgba(14,100,14);
		    width: 25px;
		    height: 30px;
		    border-radius: 0 10px 35px 10px;
		    transform:  translateY(50%) translateX(0);
		}
		.edge.right{
		    position: absolute;
		    left: unset;
		    bottom: unset;
		    top: 0;
		    right: 0;
		    background-color: rgba(14,100,14);
		    width: 25px;
		    height: 30px;
		    border-radius: 0 10px 35px 10px;
		    transform:  translateY(0) translateX(50%);
		}
		.leaf:nth-child(even){
		    background-color: #0f880f;
		}
		.leaf:nth-child(even) .edge{
		    background-color: #0f880f;
		}
		.leaf:nth-child(1){
		    z-index: 100;
		    transform: rotate(45deg) scale(0.8);
		}
		.leaf:nth-child(2){
		    z-index: 99;
		    top: 15%;
		    transform: rotate(45deg) scale(1.3);
		}
		.leaf:nth-child(3){
		    z-index: 98;
		    top: 28%;
		    transform: rotate(45deg) scale(1.6);
		}
		.leaf:nth-child(4){
		    z-index: 97;
		    top: 41%;
		    transform: rotate(45deg) scale(1.9);
		}
		.leaf:nth-child(5){
		    z-index: 96;
		    top: 54%;
		    transform: rotate(45deg) scale(2.2);
		}
		.trunk{
		    width: 25px;
		    height: 45px;
		    border-radius: 0 0 3px 3px;
		    position: absolute;
		    left: 50%;
		    transform: translateX(-50%);
		    bottom: 20px;
		    z-index: 1;
		    box-shadow: 0 0 10px 5px rgb(19,19,19);
		    background: linear-gradient(0deg,#6d411b 0%,#5a341d 64%);
		}
		.ball{
		    width: 20px;
		    height: 20px;
		    background: #f00;
		    box-shadow:  -1px -1px 6px inset #600,1px 1px 8px inset #ffc9c9;
		    border-radius: 50%;
		    z-index: 101;
		    position: absolute;
		}
		.b1{
		    left: 25%;
		    top: 30%;
		}
		.b2{
		    left: 35%;
		    top: 50%;
		}
		.b3{
		    left:65%;
		    top: 20%;
		}
		.b4{
		    left: 45%;
		    top: 22%;
		}
		.b5{
		    left: 40%;
		    top: 72%;
		}
		.b6{
		    left: 60%;
		    top: 52%;
		}
		.b7{
		    left: 50%;
		    top: 62%;
		}
		.b8{
		    left: 80%;
		    top: 42%;
		}
		.b9{
		    left: 10%;
		    top: 62%;
		}
		.b4,.b5,.b6{
		    background: #ececec;
		    box-shadow:  -1px -1px 6px inset #615f5f,1px 1px 8px inset #fff;
		
		}
		.b7,.b8,.b9{
		    background: yellow;
		    box-shadow:  -1px -1px 6px inset #3a3101,1px 1px 8px inset #fff;
		}
		.sparkle span{
		    display: block;
		    position: absolute;
		    font-size: 20px;
		    z-index: 101;
		    color: #fff;
		    animation: lights 1.5s ease infinite alternate;
		}
		@keyframes lights{
		    0%,100%{
		        transform: scale(1);
		    }
		    50%{
		        transform: scale(1.5);
		    }
		}
		.sparkle span:nth-child(1){
		    left: 30%;
		    top: 40%;
		}
		.sparkle span:nth-child(2){
		    left: 40%;
		    top: 27%;
		    font-size: 15px;
		}
		.sparkle span:nth-child(3){
		    left: 50%;
		    top: 57%;
		    font-size: 12px;
		
		}
		.sparkle span:nth-child(4){
		    left: 70%;
		    top: 67%;
		    font-size: 14px;
		}
		.sparkle span:nth-child(5){
		    left: 74%;
		    top: 13%;
		    font-size: 16px;
		
		}
		.sparkle span:nth-child(5){
		    left: 74%;
		    top: 13%;
		    font-size: 16px;
		}
		.blink div{
		    width: 3px;
		    height: 3px;
		    background: #fff;
		    z-index: 101;
		    position: absolute;
		    border-radius: 50%;
		    animation: blink 1.5s ease infinite alternate;
		}
		.blink div:nth-child(2){
		    left: 34%;
		    top: 13%;
		    transform: scale(1.2);
		}
		.blink div:nth-child(3){
		    left: 54%;
		    top: 43%;
		    transform: scale(0.6);
		}
		.blink div:nth-child(4){
		    left: 64%;
		    top: 33%;
		    transform: scale(1.4);
		}
		.blink div:nth-child(5){
		    left: 34%;
		    top: 63%;
		    transform: scale(1.8);
		}
		.blink div:nth-child(6){
		    left: 14%;
		    top: 76%;
		    transform: scale(1.5);
		}
		@keyframes blink{
		    0%{
		        box-shadow: 0 0 0 0 #fff;
		    }
		    25%{
		        box-shadow: 0 0 1px 1px #fff;
		
		    }
		    50%{
		        box-shadow: 0 0 2px 2px #fff;
		
		    }
		    75%{
		        box-shadow: 0 0 3px 3px #fff;
		
		    }
		100%{
		        box-shadow: 0 0 4px 4px #fff;
		
		    }
		}
		
		.snow_box{
		    width: 200%;
		    height: 100%;
		    position: absolute;
		    left: 0;
		    right: 0;
		    bottom: 0;
		    animation: 12s snow_moving linear forwards infinite;
		    transform: translateY(-100%);
		    z-index: 9999;
		}
		.snow_box:nth-of-type(2n){
		    animation-delay: 6s;
		}
		@keyframes snow_moving{
		    0%{
		        transform: translateY(-100%);
		    }
		    100%{
		        transform: translateY(100%);
		    }
		}
		.sonwflake{
		    width: 6px;
		    height: 6px;
		    background: rgba(255,255,255,0.7);
		    border-radius: 50%;
		    position: absolute;
		    top: 0;
		    left: 0;
		    animation: 5s flake_moving linear forwards infinite;
		}
		.sonwflake:nth-of-type(2n){
		    animation-delay: 2.5s;
		}
		@keyframes flake_moving {
		    0%{
		        transform: translateX(0%);
		    }
		    50%{
		        transform: translateX(-500%);
		    }
		    0%{
		        transform: translateX(0%);
		    }
		}
		.smaller .sonwflake{
		    width: 4px;
		    height: 4px;
		}
		
		.smallest .sonwflake{
		    width: 2px;
		    height: 2px;
		}
		.word {
		    font-size: 22px;
		    text-align: center;
		    color: gold;
		    padding-top: 50px;
		    letter-spacing: 5px;
		    text-shadow: 2px 4px 9px rgba(255,255,255,0.7);
		}
		
	</style>
</head>
<body>
	<p class="word">Merry Christmas</p>
    <div class="moon">

    </div>
     <div class="tree">
        <div class="star">
            <div class="star_in"></div>
        </div>
        <div class="leaf-box">
            <div class="leaf">
                <div class="edge"> </div>
                <div class="edge right"> </div>
            </div>
            <div class="leaf">
                <div class="edge"> </div>
                <div class="edge right"> </div>
            </div>
            <div class="leaf">
                <div class="edge"> </div>
                <div class="edge right"> </div>
            </div>
            <div class="leaf">
                <div class="edge"> </div>
                <div class="edge right"> </div>
            </div>
            <div class="leaf">
                <div class="edge"> </div>
                <div class="edge right"> </div>
            </div>
        </div>
        <div class="trunk">

        </div>
        <div class="ball_box">
            <div class="ball b1"></div>
            <div class="ball b2"></div>
            <div class="ball b3"></div>
            <div class="ball b4"></div>
            <div class="ball b5"></div>
            <div class="ball b6"></div>
            <div class="ball b7"></div>
            <div class="ball b8"></div>
            <div class="ball b9"></div>
        </div>
        <div class="sparkle">
            <span>✨</span>
            <span>✨</span>
            <span>✨</span>
            <span>✨</span>
            <span>✨</span>
            <span>✨</span>
        </div>
        <div class="blink">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>

     </div>
     <div class="snow_box">
        <div>
           <i class="sonwflake" style="left:11.39%;top:25%"></i>
           <i class="sonwflake" style="left:56.39%;top:13%"></i>
           <i class="sonwflake" style="left:41.39%;top:75%"></i>
           <i class="sonwflake" style="left:94.39%;top:40%"></i>
           <i class="sonwflake" style="left:51.39%;top:13%"></i>
           <i class="sonwflake" style="left:33.39%;top:12%"></i>
           <i class="sonwflake" style="left:80.39%;top:64%"></i>
           <i class="sonwflake" style="left:34.39%;top:76%"></i>
           <i class="sonwflake" style="left:32.39%;top:10%"></i>
           <i class="sonwflake" style="left:40.39%;top:13%"></i>
           <i class="sonwflake" style="left:54.39%;top:90%"></i>
           <i class="sonwflake" style="left:19.39%;top:23%"></i>
           <i class="sonwflake" style="left:6.39%;top:1%"></i>
           <i class="sonwflake" style="left:23.39%;top:76%"></i>
           <i class="sonwflake" style="left:23.39%;top:64%"></i>
           <i class="sonwflake" style="left:12.39%;top:86%"></i>
           <i class="sonwflake" style="left:27.39%;top:82%"></i>
           <i class="sonwflake" style="left:3.39%;top:3%"></i>
           <i class="sonwflake" style="left:37.39%;top:75%"></i>
           <i class="sonwflake" style="left:1.39%;top:45%"></i>
           <i class="sonwflake" style="left:6.39%;top:4%"></i>
           <i class="sonwflake" style="left:75.39%;top:87%"></i>
           <i class="sonwflake" style="left:1.13%;top:45%"></i>
           <i class="sonwflake" style="left:32%;top:12%"></i>
        </div>
        <div class="smaller">
           <i class="sonwflake" style="left:80%;top:11%"></i>
           <i class="sonwflake" style="left:85%;top:82%"></i>
           <i class="sonwflake" style="left:2%;top:1%"></i>
           <i class="sonwflake" style="left:23%;top:23%"></i>
           <i class="sonwflake" style="left:13%;top:54%"></i>
           <i class="sonwflake" style="left:12%;top:65%"></i>
           <i class="sonwflake" style="left:23%;top:86%"></i>
           <i class="sonwflake" style="left:42%;top:1%"></i>
           <i class="sonwflake" style="left:54%;top:1%"></i>
           <i class="sonwflake" style="left:34%;top:5%"></i>
           <i class="sonwflake" style="left:7%;top:23%"></i>
           <i class="sonwflake" style="left:1%;top:75%"></i>
           <i class="sonwflake" style="left:34%;top:40%"></i>
           <i class="sonwflake" style="left:65%;top:8%"></i>
           <i class="sonwflake" style="left:12%;top:87%"></i>
           <i class="sonwflake" style="left:2%;top:2%"></i>
           <i class="sonwflake" style="left:34%;top:50%"></i>
           <i class="sonwflake" style="left:1%;top:5%"></i>
           <i class="sonwflake" style="left:43.4%;top:12.3%"></i>
           <i class="sonwflake" style="left:20.54%;top:34.32%"></i>
           <i class="sonwflake" style="left:54.3%;top:12.34%"></i>
           <i class="sonwflake" style="left:1.54%;top:23.43%"></i>
        </div>
        <div class="smallest">
           <i class="sonwflake" style="left:2.23%;top:1.43%"></i>
           <i class="sonwflake" style="left:23.34%;top:34.32%"></i>
           <i class="sonwflake" style="left:12.34%;top:54.34%"></i>
           <i class="sonwflake" style="left:64.54%;top:65%"></i>
           <i class="sonwflake" style="left:46.45%;top:45.45%"></i>
           <i class="sonwflake" style="left:34.34%;top:45%"></i>
           <i class="sonwflake" style="left:2.34%;top:64.3%"></i>
           <i class="sonwflake" style="left:1.23%;top:23.43%"></i>
           <i class="sonwflake" style="left:12.32%;top:23%"></i>
           <i class="sonwflake" style="left:98.67%;top:75.34%"></i>
           <i class="sonwflake" style="left:34.%;top:3.3%"></i>
           <i class="sonwflake" style="left:64.34%;top:34.34%"></i>
           <i class="sonwflake" style="left:2.34%;top:5.34%"></i>
           <i class="sonwflake" style="left:2.3%;top:1.23%"></i>
           <i class="sonwflake" style="left:23.344%;top:2.32%"></i>
           <i class="sonwflake" style="left:11.23%;top:5.23%"></i>
           <i class="sonwflake" style="left:43.4%;top:12.3%"></i>
           <i class="sonwflake" style="left:21.54%;top:12.32%"></i>
           <i class="sonwflake" style="left:54.3%;top:12.34%"></i>
           <i class="sonwflake" style="left:13.23%;top:22.32%"></i> <i class="sonwflake" style="left:2%;top:1%"></i>
           
        </div>
   </div>
   <div class="snow_box">
    <div>
       <i class="sonwflake" style="left:11.39%;top:25%"></i>
       <i class="sonwflake" style="left:56.39%;top:13%"></i>
       <i class="sonwflake" style="left:41.39%;top:75%"></i>
       <i class="sonwflake" style="left:94.39%;top:40%"></i>
       <i class="sonwflake" style="left:51.39%;top:13%"></i>
       <i class="sonwflake" style="left:33.39%;top:12%"></i>
       <i class="sonwflake" style="left:80.39%;top:64%"></i>
       <i class="sonwflake" style="left:34.39%;top:76%"></i>
       <i class="sonwflake" style="left:32.39%;top:10%"></i>
       <i class="sonwflake" style="left:40.39%;top:13%"></i>
       <i class="sonwflake" style="left:54.39%;top:90%"></i>
       <i class="sonwflake" style="left:19.39%;top:23%"></i>
       <i class="sonwflake" style="left:6.39%;top:1%"></i>
       <i class="sonwflake" style="left:23.39%;top:76%"></i>
       <i class="sonwflake" style="left:23.39%;top:64%"></i>
       <i class="sonwflake" style="left:12.39%;top:86%"></i>
       <i class="sonwflake" style="left:27.39%;top:82%"></i>
       <i class="sonwflake" style="left:3.39%;top:3%"></i>
       <i class="sonwflake" style="left:37.39%;top:75%"></i>
       <i class="sonwflake" style="left:1.39%;top:45%"></i>
       <i class="sonwflake" style="left:6.39%;top:4%"></i>
       <i class="sonwflake" style="left:75.39%;top:87%"></i>
       <i class="sonwflake" style="left:1.13%;top:45%"></i>
       <i class="sonwflake" style="left:32%;top:12%"></i>
    </div>
    <div class="smaller">
       <i class="sonwflake" style="left:80%;top:11%"></i>
       <i class="sonwflake" style="left:85%;top:82%"></i>
       <i class="sonwflake" style="left:2%;top:1%"></i>
       <i class="sonwflake" style="left:23%;top:23%"></i>
       <i class="sonwflake" style="left:13%;top:54%"></i>
       <i class="sonwflake" style="left:12%;top:65%"></i>
       <i class="sonwflake" style="left:23%;top:86%"></i>
       <i class="sonwflake" style="left:42%;top:1%"></i>
       <i class="sonwflake" style="left:54%;top:1%"></i>
       <i class="sonwflake" style="left:34%;top:5%"></i>
       <i class="sonwflake" style="left:7%;top:23%"></i>
       <i class="sonwflake" style="left:1%;top:75%"></i>
       <i class="sonwflake" style="left:34%;top:40%"></i>
       <i class="sonwflake" style="left:65%;top:8%"></i>
       <i class="sonwflake" style="left:12%;top:87%"></i>
       <i class="sonwflake" style="left:2%;top:2%"></i>
       <i class="sonwflake" style="left:34%;top:50%"></i>
       <i class="sonwflake" style="left:1%;top:5%"></i>
       <i class="sonwflake" style="left:43.4%;top:12.3%"></i>
       <i class="sonwflake" style="left:20.54%;top:34.32%"></i>
       <i class="sonwflake" style="left:54.3%;top:12.34%"></i>
       <i class="sonwflake" style="left:1.54%;top:23.43%"></i>
    </div>
    <div class="smallest">
       <i class="sonwflake" style="left:2.23%;top:1.43%"></i>
       <i class="sonwflake" style="left:23.34%;top:34.32%"></i>
       <i class="sonwflake" style="left:12.34%;top:54.34%"></i>
       <i class="sonwflake" style="left:64.54%;top:65%"></i>
       <i class="sonwflake" style="left:46.45%;top:45.45%"></i>
       <i class="sonwflake" style="left:34.34%;top:45%"></i>
       <i class="sonwflake" style="left:2.34%;top:64.3%"></i>
       <i class="sonwflake" style="left:1.23%;top:23.43%"></i>
       <i class="sonwflake" style="left:12.32%;top:23%"></i>
       <i class="sonwflake" style="left:98.67%;top:75.34%"></i>
       <i class="sonwflake" style="left:34.%;top:3.3%"></i>
       <i class="sonwflake" style="left:64.34%;top:34.34%"></i>
       <i class="sonwflake" style="left:2.34%;top:5.34%"></i>
       <i class="sonwflake" style="left:2.3%;top:1.23%"></i>
       <i class="sonwflake" style="left:23.344%;top:2.32%"></i>
       <i class="sonwflake" style="left:11.23%;top:5.23%"></i>
       <i class="sonwflake" style="left:43.4%;top:12.3%"></i>
       <i class="sonwflake" style="left:21.54%;top:12.32%"></i>
       <i class="sonwflake" style="left:54.3%;top:12.34%"></i>
       <i class="sonwflake" style="left:13.23%;top:22.32%"></i> <i class="sonwflake" style="left:2%;top:1%"></i>
       
    </div>
</div>
</body>
</html>